<template>
    <!-- 头部标识栏 -->
    <div class="head" :style="{ backgroundColor: head_status == true ? 'white' : '' }">
        <p class="name">完善</p>
        <p class="scenic_area">
            <span id="name">{{ userData.nickname }}</span>
        </p>
    </div>
    <div class="comment">
        <div class="head_com">
            <div class="head_img">
                <img :src="userData.img" alt="">
            </div>
            <div class="head_nav">
                <div class="nav_box">
                    <img src="../assets/me1.png" alt="">
                    <p>浏览记录</p>
                </div>
                <div class="nav_box">
                    <img src="../assets/me2.png" alt="">
                    <p>套餐兑换</p>
                </div>
                <div class="nav_box">
                    <img src="../assets/me3.png" alt="">
                    <p>我的奖品</p>
                </div>
                <div class="nav_box" @click="jump('/promotion')">
                    <img src="../assets/me4.png" alt="">
                    <p>推广信息</p>
                </div>
            </div>
        </div>
    </div>
    <div class="cooperation">
        <img :src="Personal.img" alt="">
    </div>
    <div class="label">

        <p class="word">我的套餐</p>
        <van-button icon="service-o" size="small" color="#ffaa00">客服</van-button>
    </div>
    <div class="set_meal">
        <div class="set_meal_box" v-for="(item, index) in meal">
            <div class="box_top">
                <div class="box_img">
                    <img :src="item.image" alt="">
                </div>
                <div class="word_word">
                    <div class="word_top">
                        <p>{{ item.title }}</p>
                        <p>{{ item.time }}</p>
                    </div>
                    <div class="number">
                        <p>票号：{{ item.order_no }}</p>
                    </div>
                </div>
            </div>
            <div class="box_fotter" v-if="item.detail[0].status == 1">
                <p style="color: #019de9;">待使用：</p>
                <van-button type="primary" round size="mini">复制</van-button>
                <van-button type="primary" round size="mini" color="#89cc65">兑换</van-button>
                <van-button type="primary" round size="mini" color="#ff8929"
                    @click="refund(item.detail[0].id)">退票</van-button>
            </div>
            <div class="box_fotter" v-if="item.detail[0].status == 2">
                <p style="color: #89cc65;">已使用</p>

            </div>
            <div class="box_fotter" v-if="item.detail[0].status == 3">
                <p style="color: #ff8929;">待退款</p>
            </div>
            <div class="box_fotter" v-if="item.detail[0].status == 4">
                <p style="color: #e90101;">已退款</p>
            </div>
        </div>
    </div>
    <div style="width: 100%;height: 100px;">
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ref } from 'vue';
const router = useRouter()
const head_status = ref(false)//滚动条状态
const userData = ref({})
const Personal = ref({})
const meal = ref([])
let userId = sessionStorage.getItem('userId')
axios({ //请求用户信息
    url: "/api/user/userinfo", // url
    params: {
        // 参数
        id: userId
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        userData.value = res.data.user
        console.log(userData.value);
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });
axios({ //请求招商加盟
    url: "/api/Personal/index", // url
    params: {
        // 参数
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        Personal.value = res.data.canvass
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });
function myself() {
    axios({ //请求我的套餐
        url: "/api/personal/meal", // url
        params: {
            // 参数
            userid: userId
        },
    })
        .then(function (res) {
            console.log(res); // 成功回调
            meal.value = res.data.content
        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });
}
myself()

function refund(id) { //退款申请
    axios({ //请求我的套餐
        url: "/api/personal/backmoney", // url
        params: {
            // 参数
            id: id
        },
    })
        .then(function (res) {
            console.log(res); // 成功回调
            myself()
        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });
}
// 复制成功 or 失败（提示信息！！！）
// onCopy: function (e) {
//     console.log('复制成功！')
// }
// onError: function (e) {
//     console.log('复制失败！')
// }
// 点击事件
// function share(val) {
//     this.$copyText(this.message).then(function (e) {
//         alert('Copied')
//     }, function (e) {
//         alert('Can not copy')
//     })
// }
function jump(site) { //跳转事件
    router.push({
        path: site,
    })
}
//获取滚动条
function getScrollTop() {
    var scrollPos;
    if (window.pageYOffset) {
        scrollPos = window.pageYOffset;
    } else if (document.compatMode && document.compatMode != 'BackCompat') {
        scrollPos = document.documentElement.scrollTop;
    } else if (document.body) {
        scrollPos = document.body.scrollTop;
    }
    return scrollPos;
}
//监听滚动条
window.onscroll = function () {
    let scrollPos = getScrollTop();
    if (scrollPos >= 50) {
        head_status.value = true
    } else {
        head_status.value = false
    }
}
</script>

<style scoped>
.head {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    z-index: 99;
}

.name {
    position: absolute;
    left: 10px;
}

.scenic_area {
    font-weight: bold;
}

.comment {
    width: 100%;
    height: auto;
    background-image: url("../assets/beijing.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: 90px;
}

.head_com {
    width: 90%;
    height: auto;
    margin: 0px 5% 0px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    bottom: -80px;
}

.head_img {
    width: 85px;
    height: 85px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    bottom: -20px;
    box-shadow: 2px 2px 2px #dedede;
}

.head_img img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.head_nav {
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    background-color: white;
    box-shadow: 1px 1px 2px #00ffff;
    display: flex;
    justify-content: space-around;
    padding: 40px 20px 10px;
}

.nav_box {
    width: 25%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}

.nav_box img {
    width: 80%;
}

.nav_box p {
    width: 100%;
    text-align: center;
    line-height: 2.5;
    font-size: 14px;
}

.cooperation {
    width: 95%;
    height: auto;
    margin: 10px auto;
}

.cooperation img {
    width: 100%;
}

.label {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px;
    border-left: 10px solid #019de9;
}

.word {
    padding-left: 10px;
    color: #019de9;
    font-size: 18px;
}

.set_meal_box {
    width: 95%;
    height: auto;
    background-color: white;
    box-shadow: 2px 2px 2px #dedede;
    margin: 10px auto;
    border-radius: 5px;
    padding: 5px;
}

.set_meal {
    width: 100%;
    height: auto;
}

.box_top {
    width: 100%;
    height: auto;
    display: flex;

}

.box_img {
    width: 20%;
    margin-right: 5%;
}

.box_img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 5px;
}

.word_word {
    width: 75%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

.word_top {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.number {
    width: 100%;
}

.box_fotter {
    width: 100%;
    height: auto;
    display: flex;

}
</style>